<template>
  <div class="flex_aic flex-shrink-0 flex-wrap">
    <el-radio-group
      v-model="timeType"
      size="small"
      @change="handleTimeRangeChange"
      class="cover-radio"
    >
      <el-radio-button
        v-for="item in radioList"
        :key="item.value"
        :label="item.value"
      >
        {{ $t(`datePick.${item.label}`) }}
      </el-radio-button>
    </el-radio-group>
    <el-date-picker
      v-model="date"
      :type="datePickType"
      size="small"
      :range-separator="$t('datePick.至')"
      :start-placeholder="$t('datePick.开始日期')"
      :end-placeholder="$t('datePick.结束日期')"
      style="width: 240px"
      @change="handleDateChange"
      :disabledDate="disabledDate"
    />
  </div>
</template>

<script setup>
import { ref, computed, watch } from "vue";
import moment from "moment";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const dateRange = defineModel();
const emit = defineEmits(["change", "update:value"]);
const date = ref(moment().subtract(1, "day").format("YYYY-MM-DD"));
const timeType = ref("1");

const radioList = [
  {
    label: "日",
    value: "1",
    type: "day",
  },
  {
    label: "周",
    value: "2",
    type: "week",
  },
  {
    label: "月",
    value: "3",
    type: "month",
  },
  {
    label: "年",
    value: "4",
    type: "year",
  },
  {
    label: "自定义",
    value: "5",
    type: "daterange",
  },
];

// 禁用当前日期之后的日期
const disabledDate = (time) => {
  return time.getTime() > Date.now();
};

const datePickType = computed(() => {
  return radioList.find((item) => item.value === timeType.value)?.type;
});
const setDateRange = (range) => {
  const end = new Date();
  end.setHours(0, 0, 0, 0);
  const start = new Date(end);
  switch (range) {
    case "1":
      date.value = moment().subtract(1, "day").format("YYYY-MM-DD");
      break;
    case "2":
      date.value = moment().subtract(6, "day").startOf("week").format("YYYY-MM-DD");
      break;
    case "3":
      date.value = moment().startOf("month").format("YYYY-MM-DD");
      break;
    case "4":
      date.value = moment().startOf("year").format("YYYY");
      break;
    case "5":
      date.value = [
        moment().subtract(6, "day").format("YYYY-MM-DD"),
        moment().format("YYYY-MM-DD"),
      ];
      break;
  }

  handleDateChange(date.value);
};

const handleTimeRangeChange = (value) => {
  setDateRange(value);
};

const handleDateChange = (value) => {
  let dataValue = [];
  if (timeType.value === "1") {
    dataValue = [
      moment(value).format("YYYY-MM-DD 00:00:00"),
      moment(value).format("YYYY-MM-DD 23:59:59"),
    ];
  } else if (timeType.value === "2") {
    dataValue = [
      moment(value).startOf("week").format("YYYY-MM-DD"),
      moment(value).endOf("week").format("YYYY-MM-DD"),
    ];
  } else if (timeType.value === "3") {
    dataValue = [
      moment(value).startOf("month").format("YYYY-MM-DD"),
      moment(value).endOf("month").format("YYYY-MM-DD"),
    ];
  } else if (timeType.value === "4") {
    dataValue = [
      moment(value).startOf("year").format("YYYY-MM-DD"),
      moment(value).endOf("year").format("YYYY-MM-DD"),
    ];
  } else if (timeType.value === "5") {
    dataValue = [
      moment(value[0]).format("YYYY-MM-DD"),
      moment(value[1]).format("YYYY-MM-DD"),
    ];
  }

  const type = timeType.value === "1" ? 1 : timeType.value === "4" ? 3 : 2;
  emit("change", dataValue, type);
  emit("update:value", dataValue);
};
</script>
<style lang="scss" scoped>
:deep(.cover-radio) {
  .el-radio-button--small .el-radio-button__inner {
    padding: 5px 6px;
  }
}
</style>
